<template>
  <div>
    <div class="padding-t-20 padding-r-20 padding-l-20">
      <div class="flex items-center justify-between">
        <div class="title" style="margin-bottom: 0;margin-right: 40px">驱动信息</div>
        <div>
<!--          <q-btn-->
<!--            class="btn margin-r-10"-->
<!--            outline-->
<!--            color="primary"-->
<!--            label="网络诊断"-->
<!--            @click="networkDiagnosisShow"-->
<!--          />-->
          <q-btn
            class="btn"
            label="配置"
            color="primary"
            unelevated
            @click="driverSetting"/>
        </div>
      </div>
      <div class="margin-t-10 info-detail">
        <div class="flex">
          <div class="margin-r-20">关联设备: {{ assetDevice }}</div>
        </div>
        <div class="flex">
          <div class="margin-r-20">控制器类型: {{ driverInfoList[0] || '--' }}</div>
          <div class="margin-r-20">控制器品牌:{{ driverInfoList[1] || '--' }}</div>
          <div class="margin-r-20">控制器型号:{{ driverInfoList[2] || '--' }}</div>
          <div class="margin-r-20">协议名称:{{ driverInfoList[3] || '--' }}</div>
          <div class="margin-r-20">IOT接口:{{ driverInfoList[4] || '--' }}</div>
          <div class="margin-r-20">驱动版本号:{{ plcDriverInfo.version || '--' }}</div>
        </div>
      </div>
      <q-separator/>
      <div class="title" style="margin: 20px 0">子设备信息</div>
      <div class="flex padding-b-20">
        <div class="left">
          <div class="sub-title" style="margin-top: 0">网口信息</div>
          <div class="row margin-b-15">
            <div class="col flex">
              IP地址:
              <div>{{plcDriverInfo.collectIp || '--'}}</div>
            </div>
            <div class="col flex">
              设备端口:
              <div>{{plcDriverInfo.collectPort || '--'}}</div>
            </div>
          </div>
          <div class="sub-title">文件传输配置</div>
          <div class="row margin-b-15">
            <div class="col flex">
              传输地址:
              <div>{{plcDriverInfo.fileIp || '--'}}</div>
            </div>
            <div class="col flex">
              传输端口:
              <div>{{plcDriverInfo.filePort || '--'}}</div>
            </div>
          </div>
          <div class="row margin-b-15">
            <div class="col flex">
              传输协议:
              <div>{{plcDriverInfo.fileProtocol !== ''? dncProtocolTypesObj[plcDriverInfo.fileProtocol]: '--'}}</div>
            </div>
            <div class="col flex">
              用户名:
              <div>{{plcDriverInfo.fileUsername || '--'}}</div>
            </div>
          </div>
          <div class="row">
            <div class="col flex">
              密码:
              <div>{{plcDriverInfo.filePassword || '--'}}</div>
            </div>
            <div class="col flex">
              传输根目录:
              <div>{{plcDriverInfo.fileDev || '--'}}</div>
            </div>
          </div>
          <div class="sub-title">在线加工配置</div>
          <div class="row margin-b-15">
            <div class="col flex">
              采集端口:
              <div>{{plcDriverInfo.dncPort || '--'}}</div>
            </div>
            <div class="col flex">
              传输协议:
              <div>{{plcDriverInfo.dncProtocol !== '' ? dncProtocolTypesObj[plcDriverInfo.dncProtocol] : '--'}}</div>
            </div>
          </div>
          <div class="row margin-b-15">
            <div class="col flex">
              用户名:
              <div>{{plcDriverInfo.dncUsername || '--'}}</div>
            </div>
            <div class="col flex">
              密码:
              <div>{{plcDriverInfo.dncPassword || '--'}}</div>
            </div>
          </div>
        </div>
        <div class="right padding-l-20 padding-b-20">
          <div class="sub-title" style="margin-top: 0">串口信息</div>
          <div class="row margin-b-15">
            <div class="col flex">
              串口号:
              <div>{{plcDriverInfo.serialPort ? serialPortListObj[plcDriverInfo.serialPort] : '--'}}</div>
            </div>
            <div class="col flex">
              波特率:
              <div>{{plcDriverInfo.baudRate || '--'}}</div>
            </div>
          </div>
          <div class="row margin-b-15">
            <div class="col flex">
              数据位长度:
              <div>{{plcDriverInfo.dataBit || '--'}}</div>
            </div>
            <div class="col flex">
              停止位长度:
              <div>{{plcDriverInfo.stopBit || '--'}}</div>
            </div>
          </div>
          <div class="row margin-b-15">
            <div class="col flex">
              校验方式:
              <div>{{plcDriverInfo.parity || '--'}}</div>
            </div>
            <div class="col flex">
              流控:
              <div>{{plcDriverInfo.flowControl || '--'}}</div>
            </div>
          </div>

          <div class="sub-title">采集配置</div>
          <div class="row margin-b-15">
            <div class="col flex">
              采集周期:
              <div>{{plcDriverInfo.collectCycle || '--'}}</div>
            </div>
            <div class="col flex">
              采集间隔:
              <div>{{plcDriverInfo.collectInterval || '--'}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <cnc-dialog ref="cncDialog"
                :products="products"
                :productsCnc="productsCnc"
                controllerType="2"
                @successAll="successAll"
                :detailDriverParams="detailDriverParams"
                :selectDriverInfo="selectDriverInfo"
                :deviceIds="deviceId"
                :lanInfo="lanInfo"
                :subDevConfigData="subDevConfigData"
                @changeDeviceIds="changeDeviceIds"
                @driverSuccess="getPlcBindDriverInfo"
                :step="step"></cnc-dialog>
    <NetworkDiagnosis ref="networkDiagnosis" />
  </div>
</template>

<script>
import { getPlcDriverInfo } from '../../../../boot/miot/plc-list'
import CncDialog from '../list-components/gateway-dialog'
import NetworkDiagnosis from '../detail-components/network-diagnosis'
import { dncProtocolTypesObj, serialPortListObj } from '../list-components/gateway-dialog/constant'

export default {
  name: 'driver-info',
  components: {
    CncDialog,
    NetworkDiagnosis
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    productId: {
      type: String,
      default: ''
    },
    deviceId: {
      type: Array,
      default: () => []
    },
    detailDriverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    },
    lanInfo: {
      type: Object,
      default: () => {}
    },
    subDevConfigData: {
      type: Object,
      default: () => {}
    },
    products: {
      type: Array,
      default: () => []
    },
    productsCnc: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      step: 0,
      serialPortListObj: serialPortListObj,
      dncProtocolTypesObj: dncProtocolTypesObj,
      plcDriverInfo: {
        collectIp: '',
        collectPort: '',
        fileIp: '',
        filePort: '',
        fileProtocol: '',
        fileUsername: '',
        filePassword: '',
        dncPort: '',
        dncProtocol: '',
        dncUsername: '',
        dncPassword: '',
        fileDev: '',
        serialPort: '',
        baudRate: '',
        dataBit: '',
        stopBit: '',
        parity: '',
        flowControl: '',
        collectCycle: '',
        collectInterval: ''
      }
    }
  },
  watch: {
    boxId: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getPlcBindDriverInfo()
        }
      }
    }
  },
  computed: {
    driverInfoList () {
      return this.plcDriverInfo?.driverName?.split('_') || []
    },
    assetDevice () {
      const deviceList = this.plcDriverInfo?.deviceListResVos
      if (deviceList) {
        return `${deviceList[0].deviceName}(${deviceList[0].assetNumber})`
      }
      return ''
    }
  },
  methods: {
    driverSetting () {
      this.step = 2
      this.$refs.cncDialog.showDialog()
    },
    successAll () {
      this.$emit('successAll')
    },
    changeDeviceIds (data) {
      this.$emit('changeDeviceIds', data)
    },
    getPlcBindDriverInfo () {
      getPlcDriverInfo(this.boxId, this.productId).then(res => {
        if (res.data) {
          this.plcDriverInfo = res.data
          this.$emit('changeDriverInfo', res.data)
        }
      })
    },
    networkDiagnosisShow () {
      this.$refs.networkDiagnosis.showDialog()
    }
  }
}
</script>

<style scoped lang="scss">
.info-detail {
  font-size: 16px;
  line-height: 2;
}

.title {
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: #5f77fd;
  margin-bottom: 16px;
}

.sub-title {
  line-height: 1;
  font-size: 14px;
  color: #5f77fd;
  margin: 16px 0;
}

.left,
.right {
  width: 50%;
}

.left {
  border-right: 1px solid #d3d3d3;
}
</style>
